// 路由懒加载需要用到react里面的 lazy 方法 和Suspense  结合使用
// lazy(()=>import()) 接受一个函数，这个函数需要动态调用 import('文件位置').必须返回一个 Promise
// 这个方法可以节省性能,在页面未被点击之前,不会加载这个页面,点击之后才会加载
import { lazy, Suspense } from "react";
import { Navigate, useRoutes } from 'react-router-dom'
import Loading from "../components/Loading";
const Login = lazy(() => import('../pages/Login'))
const Main = lazy(() => import('../pages/Main'))
const NotFound = lazy(() => import('../components/404'))
const Home = lazy(() => import('../pages/Main/Home'))
const About = lazy(() => import('../pages/Main/About'))
const List = lazy(() => import('../components/List'))

// 将Suspense封装起来,因为每一个路由都要包裹一层Suspense,封装之后可以批量使用
const load = ((Comp) => {
    return (
        <Suspense fallback={<Loading />}>
            <Comp />
        </Suspense>
    )
})

const routes = [
    {
        path: "/login",
        element: load(Login),
    },
    {
        path: "/main",
        element: load(Main),
        children: [
            {
                path: "/main/home",
                element: load(Home),
                children: [
                    {
                        path: "/main/home/music/:id",
                        element: load(List)
                    },
                    {
                        path: "/main/home/news/:id",
                        element: load(List)
                    },
                ]
            },
            {
                path: "/main/about",
                element: load(About)
            },
        ]
    },
    {
        path: "/",
        element: <Navigate to="/login" />
    },
    {
        path: "*",
        element: load(NotFound)
    },

]
// 暴露routes
export default routes;

//这样的写法,认为定义了 GetRoutes 组件 这个组件就是根据路由表生成的 路由配置结构
export const GetRoutes = () => {
    //在组件中在外层可以使用hook
    return useRoutes(routes)
}

/* //自定义hooks
export const useMyRoutes = () => {
  //在自定义hooks中是可以使用hook
  return useRoutes(routes)
} */